﻿<!doctype html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<meta name="keywords" content="天地图"/>
	<title>天地图－地图API－范例－基本地图</title>
	<link rel="stylesheet" type="text/css" href="http://api.tianditu.com/api-new/css/shCore.css" />
    <script src="http://api.tianditu.com/api-new/js/scale.fix.js"></script>
    <script src="http://api.tianditu.com/api-new/js/jquery-1.6.4.min.js"></script>
    <!--[if lt IE 9]>
    <script src="../js/html5.js"></script>
    <![endif]-->
    <script type="text/javascript" src="http://api.tianditu.com/api-new/js/ZeroClipboard.js"></script>
    <script type="text/javascript" src="http://api.tianditu.com/api-new/js/allscript.js"></script>
    <script type="text/javascript" src="http://api.tianditu.com/api-new/api/js/maps.js"></script>
    <script type="text/javascript" src="http://api.tianditu.com/api-new/js/showCode.js"></script>
	<script type="text/javascript" id = "codetoshow">
	var map;
	var zoom = 12;

//添加标记工具使用
var markerTool,marker;
var listener = null;

function onLoad()
{
	
	var config = {
		//projection: "EPSG:900913" //球面墨卡托投影
		projection: "EPSG:4326" //经纬度投影
	}

	//初始化地图对象
	map=new TMap("mapDiv");
	//设置显示地图的中心点和级别
	map.centerAndZoom(new TLngLat(114.40969,30.50945),zoom);
	//允许鼠标双击地图放大
	map.enableDoubleClickZoom()

	//允许鼠标滚轮缩放地图
	map.enableHandleMouseScroll();

	//控制是否允许鼠标惯性拖拽地图
	map.enableInertia();//map.disableInertia()


	//控制是否允许键盘操作地图(WASD键或Home/End/PageU/PageD大跳，方向键小跳，+/-缩放)
	map.enableHandleKeyboard();//map.disableHandleKeyboard()


	{//添加缩放平移控件
		var config = {
			type:"TMAP_NAVIGATION_CONTROL_LARGE",	//缩放平移的显示类型
			anchor:"TMAP_ANCHOR_TOP_RIGHT",			//缩放平移控件显示的位置
			offset:[0,250],							//缩放平移控件的偏移值
			showZoomInfo:true						//是否显示级别提示信息，true表示显示，false表示隐藏。
		};
		//创建缩放平移控件对象
		control=new TNavigationControl(config);
		//添加缩放平移控件
		map.addControl(control);
	}

	{//添加比例尺控件
		//创建比例尺控件对象
		var scale = new TScaleControl();
		map.addControl(scale);
	}

	{//创建右键菜单对象
		var menu  = new TContextMenu();
		var txtMenuItem = [
			{
				text:'放大',
				callback:function(){map.zoomIn()}
			},
			{
				text:'缩小',
				callback:function(){map.zoomOut()}
			},
			{
				text:'放置到最大级',
				callback:function(){map.setZoom(18)}
			},
			{
				text:'查看全国',
				callback:function(){map.setZoom(4)}
			},
			{
				text:'获得右键点击处坐标',
				callback:function(lnglat){
					alert(lnglat.getLng()+","+lnglat.getLat());
				}
			}
		];
		for(var i=0; i < txtMenuItem.length; i++)
		{
			//创建右键菜单参数接口对象
			var options = new TMenuItemOptions();
			//设置右键菜单的宽度
			options.width = 100;
			//添加菜单项
			menu.addItem(new TMenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,options));
			if(i==1 || i==3)
			{
				//添加分割线
				menu.addSeparator();
			}
		}
		//添加右键菜单
		map.addContextMenu(menu);
	}

	{//添加鹰眼控件

		var config = {
			anchor: "TMAP_ANCHOR_BOTTOM_RIGHT",	//设置鹰眼位置,"TMAP_ANCHOR_TOP_LEFT"表示左上，"TMAP_ANCHOR_TOP_RIGHT"表示右上，"TMAP_ANCHOR_BOTTOM_LEFT"表示左下，"TMAP_ANCHOR_BOTTOM_RIGHT"表示右下，"TMAP_ANCHOR_LEFT"表示左边，"TMAP_ANCHOR_TOP"表示上边，"TMAP_ANCHOR_RIGHT"表示右边，"TMAP_ANCHOR_BOTTOM"表示下边，"TMAP_ANCHOR_OFFSET"表示自定义位置,默认值为"TMAP_ANCHOR_BOTTOM_RIGHT"
			size  : new TSize(180,120),			//鹰眼显示的大小
			isOpen : true						//鹰眼是否打开，true表示打开，false表示关闭，默认为关闭
		};
		//创建鹰眼控件对象
		overviewMap = new TOverviewMapControl(config);
		map.addControl(overviewMap);			//启用鹰眼控件
	}

	{//创建版权控件对象
		var control=new TCopyrightControl();
		//添加版权内容及事件
		control.addCopyright({id:1,content:"<a href='http://www.tianditu.cn' target='_blank' style='font-size:14;background:white'>~舞天~地形图测绘成果检索服务</a>",bounds:new TBounds(10,30,160,80)});

		//设置版权的位置
		control.setLeft(10);
		control.setTop(10);
		//添加版权控件
		map.addControl(control);
	}

	{//创建地图类型控件对象
		var control = new TMapTypeControl();
		//将地图类型控件添加到地图上
		map.addControl(control);
		//定义显示控件位置
		control.setRight(20);
		control.setTop(20);
	}


	{//向地图上添加标注
		var marker1 = new TMarker(new TLngLat(116.411794,39.9068));
		map.addOverLay(marker1);
	}

	{//创建地图文本对象
		var config = {
		//        text:"<a href='http://www.tianditu.com' target='_blank'>天地图</a>",
			text:"图号",
			offset:new TPixel(10,10),//10,10是让出标注箭头的位置
			position:new TLngLat(116.411794,39.9068)
		};
		var text=new TLabel(config);
		map.addOverLay(text);

	}

	AddLine();

	{//创建一个标注
		var marker = new TMarker(new TLngLat(116.411794,39.9068));
		map.addOverLay(marker);
		//设置信息窗口
		var infoWin=marker.openInfoWinHtml("图号：<br>比例尺：");
		infoWin.setTitle("图号");
	}

	if(0) {//启动添加标记工具
		markerTool = new TMarkTool(map);
		TEvent.bind(markerTool,"mouseup",markerTool,mouseup);   
		markerTool.open();
	}

	TEvent.addListener( map, "move", afterMove);
}

function afterMove()
/*{
	var cent = map.getCenter();
	map.clearOverLays();
	var lt = new TLngLat( cent.getLng()-0.5, cent.getLat()-0.5 );
	var rb = new TLngLat( cent.getLng()+0.5, cent.getLat()+0.5 );
			
	var points = [];
	points.push(new TLngLat( lt.getLng(), lt.getLat() ));
	points.push(new TLngLat( lt.getLng(), rb.getLat() ));
	points.push(new TLngLat( rb.getLng(), rb.getLat() ));
	points.push(new TLngLat( rb.getLng(), lt.getLat() ));
	var polygon = new TPolygon(points,{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
	map.addOverLay( polygon );
}*/
{
	var cent = map.getCenter();
	var bound = map.getBounds();
	var r = bound.getNorthEast().getLng();
	var l = bound.getSouthWest().getLng();
	var t = bound.getNorthEast().getLat();
	var b = bound.getSouthWest().getLat();
	var pxl = map.getZoomUnits();
	var scale = 100000;
	
	createXmlHttpRequestObject();
	
	var url = "GetMapsByRange.php?lon="+l+"&lat="+b+"&dlon="+(r-l)+"&dlat="+(t-b)+"&scale="+scale;
	xmlHttp.onreadystatechange = GetMapRangeOK; //判断浏览器状态栏（接收完数据时触发的事件）
	xmlHttp.open( "GET", url, false );
	xmlHttp.send(null);

	//mapAry = "GetMapsByRange.php?lon="+l+"&lat="+b+"&dlon="+(r-l)+"&dlat="+(t-b)+"&scale="+scale";
	
//	var lt = new TLngLat( cent.getLng()-1, cent.getLat()-1 );
//	var rb = new TLngLat( cent.getLng()+1, cent.getLat()+1 );
//			
//	var points = [];
//	points.push(new TLngLat( lt.getLng(), lt.getLat() ));
//	points.push(new TLngLat( lt.getLng(), rb.getLat() ));
//	points.push(new TLngLat( rb.getLng(), rb.getLat() ));
//	points.push(new TLngLat( rb.getLng(), lt.getLat() ));
//	var polygon = new TPolygon(points,{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
//	map.addOverLay( polygon );
}

function GetMapRangeOK()
{
	if( xmlHttp.readyState == 4 && xmlHttp.status == 200 )//表示数据接收完成
	{
		document.getElementById("mapname").innerHTML = xmlHttp.responseText;
		
//	map.clearOverLays();
	}

}
//////////////////////////////////////////////////////////////////////////////////////////////////////////
function addNavControl()
{
    map.removeControl(control);
    //获得缩放平移控件的样式
    var selectNavCss = document.getElementById("selectnavcss");
    var index = selectNavCss.selectedIndex;
    var controlCss = selectNavCss.options[index].value;
    //获得缩放平移控件的位置
    var selectNavPosition = document.getElementById("selectnavposition");
    var index = selectNavPosition.selectedIndex;
    var controlPosition = selectNavPosition.options[index].value;
    //添加缩放平移控件
    var config = {
        type:controlCss,		//缩放平移控件的显示类型
        anchor:controlPosition	//缩放平移控件显示的位置
    };
    control = new TNavigationControl(config);
    map.addControl(control);
}

function FlyToPos()
{
	map.panTo(new TLngLat(116.64899,40.12948));   //移动到北京顺义
}

function JumpToPos()
{
	   	//设置显示地图的中心点和级别
	map.centerAndZoom(new TLngLat(114.40969,30.50945),zoom);
}

function setCenterAndZoom()
{
	var lng = document.getElementById("lng").value;
	var lat = document.getElementById("lat").value;
	var zoom = document.getElementById("zoom").value;
	map.setCenter(new TLngLat(lng,lat));	//将地图定位到北京顺义
	map.setZoom(zoom);  //将视图切换到指定的缩放等级，中心点坐标不变
}

function AddLine()
{
	var points = [];
	points.push(new TLngLat(116.41136,39.97569));
	points.push(new TLngLat(116.411794,39.9068));
	points.push(new TLngLat(116.32969,39.92940));
	points.push(new TLngLat(116.385438,39.90610));
	//线
	//	    var polygon = new TPolyline(points,{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
	//多边形
	var polygon = new TPolygon(points,{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});

	//polygon.setStrokeWeight(3);
	//polygon.setStrokeColor("red");	//设置边线颜色
	//polygon.setFillColor("yellow");	//设置填充颜色
	//polygon.setStrokeOpacity(0.3);	//设置边线透明度
	//polygon.setFillOpacity(0.5);
	//polygon.setStrokeStyle("dashed");
	map.addOverLay(polygon);
}

function AddRect()
{

	var config = {
		strokeColor:"blue",	//折线颜色
		fillColor:"#FFFFFF",	//填充颜色。当参数为空时，折线覆盖物将没有填充效果
		strokeWeight:"5px",	//折线的宽度，以像素为单位
		opacity:0.5,	//折线的透明度，取值范围0 - 1
		strokeStyle:"solid"	//折线的样式，solid或dashed
	};
	var bounds = new TBounds(116.36231,39.87784,116.43954,39.92841);
	var rect = new TRect(bounds,config);
	map.addOverLay(rect);

	//向地图上添加椭圆
	//    var ellipse = new TEllipse(bounds,config);
	//    map.addOverLay(ellipse);
}

///////////////////////////////////////////////////////////////////////
//添加标记工具

//鼠标在地图上按下左键时添加一个点标记
function mouseup(point)
{
	marker = new TMarker(point);
	map.addOverLay(marker);
	markerTool.close();
}

//启动编辑点标记
function edit()
{
	if(marker==null){
		alert('请先画点再进行编辑！');
		return;
	}
	else{
		marker.enableEdit();
		listener=TEvent.bind(marker,"dragend", marker, function(lnglat){
			marker.disableEdit();
			TEvent.removeListener(listener);  
			alert(lnglat.getLng()+","+lnglat.getLat());      		
		});
	}
}
///////////////////////////////////////////////////////////////////////

</script>
</head>
<body>
<div id="outter">
    <div id="mapDiv"></div>

    <div id="describediv"style="width:200px;">
        设置地图中心点的经纬度坐标及缩放级别<br>
        经度<input id="lng" type="text" value="114.44899" style="width:120px;"><br/>
        纬度<input id="lat" type="text" value="30.50948"  style="width:120px;"><br/>
        缩放级别<input id="zoom" type="text" value="12"  style="width:90px;"><br/>
        <input type="button" value="设置" onclick="setCenterAndZoom()"/>
         
		<p id="mapname1" >
			<script type="text/javascript" id = "maps">
				<?php
					$name = H50H072015; 
					$lon = 114.44899; 
					$lat = 30.50948; 
					$dlon = 1; 
					$dlat = 1; 
					$scale = 1000000; 
				?>
				var mapAry = "<?php $cmd = sprintf("GetMapNumber.exe --GetMapsByRange %f %f %f %f %d", $lat, $lon, $dlat, $dlon, $scale); system($cmd); ?>";
				document.write(mapAry);
			</script>
		</p>

    </div>
    <div id="close"></div>

</div>
</body>
</html>